<template>
	<view class="container">
		<view class="banner" v-if="store_info.banner">
			<image lazy-load="true"  class="banner" :src="store_info.banner" mode="widthFix"></image>
		</view>
		<view class="store-info" >
			<view class="follow">
				<view class="store-ico"><image lazy-load="true"  :src="store_info.logo" class="store-ico"></image></view>
				<view class="left">
					<view class="name">{{store_info.name}}</view>
					<view class="follow">
						<view class="follow-num">{{store_info.follow_count}}人关注</view>
						<!-- <view class="follow-btn">+收藏</view> -->
					</view>
				</view>
			</view>
			<view class="follow">
				<image lazy-load="true"  class="location" @click="goShop(store_info.lat,store_info.lng)" src="../../static/images/daohang.png" mode="widthFix"></image>
			</view>
		</view>
<view class="search-bar">
			<view class="search">
				<view class="search-ico">
					<image lazy-load="true"  src="../../static/images/search-ico.png" class="search-ico"></image>
				</view>
				<view class="search-input">
					<input type="text" confirm-type="search" class="search-input" placeholder="搜索商品" @confirm="seacrch_good" v-model="search_name">
					</view>
				<view class="close-btn" v-if="search_name" @click="cleanInput()">
					<image lazy-load="true"  src="../../static/images/close-btn.png" class="close-btn"></image>
				</view>
			</view>
		</view>
		<view class="item-tab">
			<!-- <view class="title" @click="setActive(1)" :class="{'active':isActive == 1}">推荐</view> -->
			<view class="title" @click="setActive(2,'sell_count DESC')" :class="{'active':isActive == 2}">销量</view>
			<view class="title" @click="setActive(3,'price ASC')" :class="{'active':isActive == 3}">价格</view>
			<view class="title" @click="setActive(4,'create_time DESC')" :class="{'active':isActive == 4}">新品</view>
			<!-- <view style="" class="title" @click="selectGoods(1)" :class="{'active':selectGood == 1}">筛选品牌</view> -->
		</view>
		<view class="" v-if="selectGood == 1">
			<view class="brand-list">
				<view class="brand-box"  v-for="(item , key) in brand_list" :key="key" @click="setChecked(item.id)" :class="{'active':item.checked}">
					<view class="brand"><image lazy-load="true"  :src="item.logo" mode="aspectFit" class="brand"></image></view>
				</view>
			</view>
			<view class="btn-box" >
				<view class="reset" @click="resetChecked()">重置</view>
				<view class="confirm" @click="select_good_list()">确定</view>
			</view>
		</view>
		<view class="item-list">
			<view class="item-box" v-for="(item,key) in goods_list" :key="key" @click="go_detail(item.id)">
				<view class="item-img">
					<image lazy-load="true"  :src="item.thumbnail" mode="aspectFit" class="img-list-1"></image>
				</view>
				<view class="item-info">
					<view class="item-store-name">{{item.store_name}}</view>
				</view>
				<view class="item-info">
					<view class="item-name">{{item.name}}</view>
				</view>
				<view class="item-info">
					<view class="item-price">￥{{item.real_price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
	export default {
		data() {
			return {
				inputVal:'',
				isActive:2,
				selectGood:0,
				brandName:'',
				brand_list:[],
				"list":[],
				category_id:'',
				search_name:'',
				brand:[],
				store_id:0,
				p:1,
				per:20,
				sort_g:"sell_count DESC",
				goods_list:[],
				is_bottom:false,
				store_info:{}
			}
		},
		onLoad(e) {
			var self = this;
			self.store_id = e.id;
			if(e.search){
				this.search_name = decodeURIComponent(e.search);
			}
			this.$request.request({
				url:'/store/info',
				data:{
					store_id:e.id,
					lng:e.lng,
					lat:e.lat
				},
				success:function(res){
					if(res.code==200){
						var x = res.result;
						console.log(x)
						x.distance=parseInt(x.distance)>1000 ? parseFloat(parseInt(x.distance/100)/10)+'km' : parseInt(x.distance)+'m';
						x.logo=self.$http_img(x.logo);
						if(x.banner){
							x.banner = self.$http_img(x.banner);
						}
						self.store_info = x
					}else{
						
					}
				}
			});
			
			
			
			this.$request.request({
				url:'/search/brand_list',
				success:function(res){
					if(res.code==200){
						var x = res.result;
						x.forEach((item,index)=>{
							x[index].logo = self.$http_img(item.logo);
							x[index].checked = false;
						})
						self.brand_list = x
					}else{
						
					}
				}
			});
			this.get_good_list();
			
			
			// #ifdef H5
			
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=local-store-home&id='+e.id+'&lat='+e.lat+'&lng='+e.lng, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '这个店铺很不错哟，还可以到店体验，推荐给你！', // 分享描述
				link: self.$request.h5_share_url+'?page=local-store-home&id='+e.id+'&lat='+e.lat+'&lng='+e.lng, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
			
			
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
		 components: {uniDrawer},
		methods: {
			cleanInput(){
				this.search_name = '';
				this.p=1;
				this.get_good_list();
			},
			setActive(num,msg){
				if(this.isActive !== num){
					uni.showLoading({
					    title: '加载中'
					});
					this.isActive = num;
					this.p = 1;
					this.goods_list=[];
					this.brand=[];
					this.sort_g=msg;
					this.get_good_list();
				}
				
				
			},
			selectGoods(){
				this.selectGood =!this.selectGood;
			},
			setChecked(brandId){
				var self = this;
				var listArr = self.brand_list;
				for(var i = 0;i<self.brand_list.length;i++){
					if(self.brand_list[i].id == brandId){
						if(self.brand_list[i].checked){
							var index = self.brand.indexOf(brandId);
							self.brand.splice(index,1);
							self.brand_list[i].checked = false
						}else{
							self.brand.push(brandId);
							self.brand_list[i].checked = true
						}
					}
				}
			},
			resetChecked(){
				var self = this;
				var listArr = self.brand_list;
				for(var i = 0; i<listArr.length;i++){
					listArr[i].checked = false;
				}
				self.brand=[];
			},
			goDetails(){
				uni.navigateTo({
				    url: '../local-store-item/local-store-item'
				});
			},
			goShop(lat,lng){
				var self = this;
				// #ifdef MP-WEIXIN
				uni.openLocation({
				    latitude:  parseFloat(lat),
				    longitude: parseFloat(lng),
				    success: function () {
				        console.log('success');
				    }
				}); 
				// #endif
			
				// #ifdef H5
				self.wx.openLocation({
				  latitude: parseFloat(lat), // 纬度，浮点数，范围为90 ~ -90
				  longitude: parseFloat(lng), // 经度，浮点数，范围为180 ~ -180。
				  name: '', // 位置名
				  address: '', // 地址详情说明
				  scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大
				  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
				});	
				// #endif  
			},
			onReachBottom(){
				if(this.is_bottom) return;
				this.is_bottom = true;
				this.p++;
				this.get_good_list();
			},
			get_good_list(){
				var self = this;
				this.$request.request({
					url:'/goods/list',
					data:{
						category_id:this.category_id,
						name:this.search_name,
						brand:this.brand.join(','),
						store_id:this.store_id,
						p:this.p,
						per:this.per,
						sort:this.sort_g
					},
					success:function(res){
						if(res.code==200){
							uni.hideLoading();
							var x = res.result;
							if(res.result.length<1){
								self.is_bottom = true;
								return false;
							}
							x.forEach((item,index)=>{
								x[index].thumbnail =self.$http_img(item.thumbnail);
								x[index].real_price = self.$money(item.real_price);
							})
							// x = x.concat(x).concat(x); //测试
							
							self.goods_list =self.goods_list.concat(x);
							console.log(self.goods_list)
							self.is_bottom = false;
						}else{
							
						}
					},
					complete:function(){
						uni.hideLoading();
					}
				});
			},
			select_good_list(){
				uni.showLoading({
				    title: '加载中'
				});
				this.p = 1;
				this.goods_list=[];
				this.get_good_list();
			},
			seacrch_good(e){
				uni.showLoading({
				    title: '加载中'
				});
				this.search_name=e.detail.value;
				this.p = 1;
				this.goods_list=[];
				this.brand=[];
				this.isActive=2;
				this.sort_g="sell_count DESC";
				this.get_good_list();
			},
			go_detail(id){
				uni.navigateTo({
				    url: '../local-store-item/local-store-item?id='+id
				});
			}
		}
	}
</script>

<style>
	@import url("local-store-home.css");
</style>
